<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/detail.css">
  <style>
    .num{
      width: 73px;
      height: 73px;
      font-size: 16px;
      text-align: center;
      display: block;
      margin: 50px 0 0 0;
      font-size: 20px;
      color: #000;
    }

    .jian{
      position: absolute;
      top:0;
      left: 82px;
    }

    .jia{
      position: absolute;
      top:38px;
      left: 82px;
    }
    /* 新增滑块 */

    .media{
      position: relative;
    }
    .media-left{
      position: relative;
    }
    .mask{
      width: 150px;
      height: 150px;
      background: yellow;
      opacity: .5;
      position: absolute;
      top:0;
      left: 0;
      display: none;
    }

    /* 大图片 */
    .glass{
      z-index: 4;
      width: 600px;
      height: 600px;
      background-image: url('./images/1.large.jpg') ;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size:1600px;
      position:absolute;
      top:0;
      left: 310px;
      border:1px solid red;
      display: none;
    }
  </style>
</head>
<body>
<h1>我是一个商品详情页面</h1>

<div class="container"></div>



<script src="../tools/jquery.min.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/cookie.js"></script>

<script>
  // 定义变量 存储 请求结果
  let goods = 0 ;


  // 调用函数 动态生成页面
  setPage();

  

  // 页面标签是动态生成的 
  // 点击效果等 必须是 事件委托
  $('.container').click(function(e){
    // 点击 减按钮 数值 -1 最小是 1
    if( e.target.getAttribute('name') === '-' ){
      // 获取 input标签中当前的数值数据
      let num = Number( $('.num').val() );
      console.log( num );

      // 如果 数值已经是1 不能 再减了
      if( num === 1 ){
        window.alert('您最少购买一件商品');

      // 如果 不是1 数值 -1 赋值给input标签
      }else{
        $('.num').val( num-1 );
      }
    
    // 点击 减按钮 数值 +1 最大是 库存数值
    }else if( e.target.getAttribute('name') === '+' ){
      // 获取 input标签中当前的数值数据
      let num = Number( $('.num').val() );
      console.log( num );

      // 如果 数值已经是 库存 不能 再加了
      if( num === goods.goods_number - 0 ){
        window.alert('您购买的商品不能超过库存');

      // 如果 不是 库存 数值 +1 赋值给input标签
      }else{
        $('.num').val( num+1 );
      }

    // 如果 点击的是 加入 购物车按钮
    }else if( e.target.getAttribute('name') === 'inCart' ){

      // 如果没有登录 跳转登录页面
      // 如果已经登录 先存储当前商品信息 再跳转购物车页面

      // 获取 cookie 数据
      // 如果有 cookie 登录 调用 cookie.login  有 结果数据
      // 如果没有 cookie 登录 调用 cookie.login  结果是 undefined
      const cookieObj = myGetCookie();

      // 没有登录
      if( cookieObj.login === undefined ){
        // cookie.login 调用结果是 undefined 证明 没有登录
        if( window.confirm('您还没有登录,点击确定,跳转登录页面') ){
          window.location.href = './login.html';
        }
        
      // 已经登录  
      }else{
        // 将商品信息加入购物车数据

        // 获取 本地 localStorage 中 cart 中的数据
        let cart = localStorage.cart ; 
        console.log( cart );

        // 购物车信息完全不存在
        if( cart === undefined ){
          // 给 当前商品信息添加 2个属性
          // buy 购买状态 默认值 是 true 也就是 默认购买
          // num 购买数量 是 input输入框输入的数据
          //     数值范围是 1 - 库存

          // 获取input输入框输入的数值 转化为数值类型
          var num = Number( $('.num').val() ) ; 

          // 购买数量 超出 范围 终止程序 弹出提示内容
          if(  !(num >= 1 && num <= goods.goods_number) ){
            // 弹出提示框
            window.alert(`商品数量范围必须是 1 至 库存数值 ${goods.goods_number}`);
            // 终止之后的程序
            return;
          }

          // 给 当前商品数据 新增属性
          goods.buy = true;
          goods.num = num;

          // 将 当前商品数据 存储在 数组中 
          // 以 json 字符串形式 存储 到 localStorage 的 cart属性中
          localStorage.cart = JSON.stringify( [ goods ] );

        // 购物车数据 已经存在
        }else{
          // 将 购物车数据 从 json字符串 还原为对应的数据类型
          // 转化结果是 数组中存储对象 对象是每一个商品的商品信息
          // 如果 转化之后 cart这个数组 是一个 length 是 0 的数组 证明 是一个 空数组
          //      也就是 没有任何商品信息 
          //      新增商品属性 以数组json字符串形式 存储到 localStorage , cart 中
          // 如果 转化之后 cart这个数组 length 不是 0 证明 不是 空数组
          //      也就是 有 商品数据
          //      判断 商品数据中 有没有当前商品
          //           如果没有当前商品 
          //            新增商品属性 将商品数据 新增写入数组的起始位置 将 新数组转化为json字符串 存储到 localStorage , cart 中
          //           如果有当前商品
          //            累加购买商品数量 总数量不能超过库存 将 新数组转化为json字符串 存储到 localStorage , cart 中
          cart = JSON.parse( cart );
          console.log( cart );

          // 判断 是不是 空数组组

          if( cart.length === 0 ){
            // 空数组情况 商品信息添加属性 存储到数组中 转化为 json字符串 存储到 localStorage 的 cart 中
            
            // 获取input输入框输入的数值 转化为数值类型
            var num = Number( $('.num').val() ) ; 

            // 购买数量 超出 范围 终止程序 弹出提示内容
            if(  !(num >= 1 && num <= goods.goods_number) ){
              // 弹出提示框
              window.alert(`商品数量范围必须是 1 至 库存数值 ${goods.goods_number}`);
              // 终止之后的程序
              return;
            }

            // 给 当前商品数据 新增属性
            goods.buy = true;
            goods.num = num;

            // 将 当前商品数据 存储在 数组中 
            // 以 json 字符串形式 存储 到 localStorage 的 cart属性中
            localStorage.cart = JSON.stringify( [ goods ] );   
            
          // 不是空数组  
          }else{
            // 判断有没有当前商品
            // 当前商品的goods_id 和 cart数组中商品的goods_id 有没有全等
            // 如果有 证明 商品已经存在 购买数量累加1
            // 如果没有 证明 商品 不存在 商品信息新增属性 写入数组的起始位置 新数组转化为json字符串 写入 localStorage 中 的 cart 属性

            // 只要有一个符合条件的结果 返回值就是 true
            // 也就是 bool 存储 true 证明 商品已经存在在购物车中
            // 也就是 bool 存储 false 证明 商品没有存储在购物车中
            let bool = cart.some(function(item){
              // item 是 cart数组中数据单元存储的数据 也就是 商品信息对象
              return item.goods_id === goods.goods_id ;
            })

            console.log( bool );

            if( bool ){
              // bool 是 true 商品已经存在 
              // 找到 goods_id 相同的 数据 累加 购买数量
              // 循环遍历 cart 数组
              for( let i = 0 ; i <= cart.length-1 ; i++ ){
                // cart 是 存储数据的数组
                // i 是 索引下标
                // cart[i] 是 存储数据的对象
                if( cart[i].goods_id === goods.goods_id ){
                  // 获取 input输入框的数据
                  let num = Number( $('.num').val() );

                  // 执行 累加操作
                  // 当 input中输入的购买数量 累加 已经购买的数量
                  num += cart[i].num;

                  // 新的购买数量 必须要 小于等于 库存值 
                  // 如果 大于 库存值 
                  if( num > goods.goods_number ){
                    // 弹出提示框
                    window.alert('您购买商品的总数量超过了库存值')
                    // 终止之后程序执行
                    return ;
                  }

                  // 修改 数组中 对应 商品信息 购买数量数据
                  cart[i].num = num;

                  // 将 新的数组的数据 写入到 localStorage 的cart 中
                  localStorage.cart = JSON.stringify( cart );
                }

              }

            // bool 是 false
            }else{
              // 如果 bool 存储的是 false
              // 证明 商品不能存在 
              // 给商品 新增属性 将 商品对象 写入数组的起始位置 将 新数组 写入 localStorage 中 cart 中
              
              // 获取input输入框输入的数值 转化为数值类型
              var num = Number( $('.num').val() ) ; 

              // 购买数量 超出 范围 终止程序 弹出提示内容
              if(  !(num >= 1 && num <= goods.goods_number) ){
                // 弹出提示框
                window.alert(`商品数量范围必须是 1 至 库存数值 ${goods.goods_number}`);
                // 终止之后的程序
                return;
              }

              // 给 当前商品数据 新增属性
              goods.buy = true;
              goods.num = num;

              // 将 当前商品数据 写入数组的起始位置
              cart.unshift( goods );

              // 将 新的数组cart 写入 localStorage
              localStorage.cart = JSON.stringify( cart );
            }

          }

        }
        
        // 跳转 购物车页面
        window.location.href = './cart.html';
      }

    }
  })


  // 使用 async 和 await 发送请求
  // 根据请求结果 动态生成页面
  async function setPage(){
    // 获取 浏览器地址栏中 goods_id 的数据
    const urlObj = getUrlObj();
    console.log( urlObj );

    // 根据 goods_id 发送请求 获取 商品对应的数据
    const res = await myPromiseAjax( '../server/goods_detail.php' , 'post' , {goods_id:urlObj.goods_id} , 'json' );
    console.log( res );

    // 给全局变量 存储 数据
    goods = res ;
    
    // 根据 请求结果 动态渲染生成页面
    let str = `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">商品详细信息</h3>
        </div>
        <div class="panel-body">
          <div class="media">
            <div class="media-left">
              <a href="#" class="A">
                <img class="media-object" src="${res.goods_small_logo}" alt="...">
              </a>
              <div class="mask"></div>
            </div>
            <div class="media-body">
              <h4 class="media-heading">${res.goods_name}</h4>
              <p>
                <i class="glyphicon glyphicon-yen"></i>
                <span>${res.goods_price}</span>
              </p>
              <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">XL</button>
                <button type="button" class="btn btn-default">L</button>
                <button type="button" class="btn btn-default">M</button>
                <button type="button" class="btn btn-default">S</button>
                <button type="button" class="btn btn-default">XS</button>
              </div>
              <p style="position:relative">
                <input value="1" class="num">
                <button name="-" type="button" class="jian btn btn-default">-</button>
                <button name="+" type="button" class="jia btn btn-default">+</button>
              </p>
              <p>
                <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                <a href="javascript:;" name="inCart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
              </p>
            </div>
            <div class="glass" style="background-image:url('${res.goods_big_logo}');"></div>
          </div>
          <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
            <li role="presentation"><a href="#">商品参数信息</a></li>
            <li role="presentation"><a href="#">相关商品</a></li>
          </ul>
          <div>
              ${res.goods_introduce}
          </div>
        </div>
      </div>
    `;
      
    // 将字符串写入页面
    $('.container').html( str );

    // script
    // 移入移出
    $('.media-left').mouseenter( function(){
      $('.mask').css('display', 'block')
      $('.glass').css('display', 'block')
    });

    // 移出
    $('.media-left').mouseleave( function(){
      $('.mask').css('display', 'none');
      $('.glass').css('display', 'none');
    } )

    // 鼠标拖拽
    // 给显示区添加鼠标移动事件
    const oMedia = document.querySelector('.media');
    console.log(oMedia);
    const oA = document.querySelector('.A');
    const oImg =document.querySelector('.media-object');
    const oMask = document.querySelector('.mask');
    const oGlass = document.querySelector('.glass');

    // 添加鼠标事件
    oA.addEventListener('mousemove', e=>{

      let containerleft =oMedia.getBoundingClientRect().left
      let containertop = oMedia.getBoundingClientRect().top
      // console.log(containerleft);

      let aborderleft = oImg.clientLeft
      let abordertop = oImg.clientTop
      // console.log(aborderleft);     0  0

      // 显示区 占位 内容+padding
      let aWidth = oImg.clientWidth
      let aHeight = oImg.clientHeight

      // 遮盖层 占位 内容 + padding+ border
      let maskWidth = oMask.offsetWidth
      // console.log(maskWidth);    150
      let maskHeiht = oMask.offsetHeight
      // 150

      // 获取坐标位置
      // 鼠标坐标 - 外边距 - 外边框 - 遮盖层占位/2
      let x = e.pageX - containerleft - aborderleft - maskWidth/2
      // console.log(x);
      let y  = e.pageY - containertop - abordertop - maskHeiht/2

      // 设置极值
      x = x < 0 ? 0 : x
      y = y < 0 ? 0 : y

      x = x > aWidth - maskWidth ? aWidth - maskWidth : x;
      y = y > aHeight - maskHeiht ? aHeight - maskHeiht : y ;

      // 将数值设定为 遮盖层定位
      oMask.style.left = x + 'px';
      oMask.style.top = y + 'px';

      oGlass.style.backgroundPosition = `${-6*x}px ${-6*y}px`; 

    })


  }

  console.log(res);
</script>


<script>
  /*
    1,  获取 浏览器地址栏中的数据信息

    2,  根据 数据信息 发送请求
        向 server/goods_detail.php 发送请求
        请求方式 post
        携带 1个 参数 键名是 goods_id
        响应体结果是 json字符串 
  
    3,  加入购物车

        (1) 如果没有登录 
          跳转登录页面

        (2) 如果已经登录 
            将商品 加入 购物车数据存储 
            也就是 存储到 localStorage 中

              1,  没有购物车数据
                给 商品信息 添加 属性
                  buy属性 是否购买支付状态 默认值 true
                  num属性 购买数量 范围是 1 至 库存
                将 商品数据 存储在 数组中 
                以 json字符串形式 将数组 存储到 localStorage 的 cart 键名中

              2,  有购物车数据
                数组的长度是不是 0 

                  数组长度 是 0
                    是一个空购物车
                    给 商品信息 添加 属性
                    buy属性 是否购买支付状态 默认值 true
                    num属性 购买数量 范围是 1 至 库存
                    将 商品数据 存储在 数组中 
                    以 json字符串形式 存储到 localStorage 的 cart 键名中

                  数组长度 不是 0

                    判断 当前商品 是不是 已经存在
                      数组.som()  判断 
                          如果数组中的数据有一个符号条件 返回结果就是 true
                          如果数组中的数据都不符合条件 返回值结果是 false

                      如果已经存在 累加 购买数量
                        范围是 1 至 库存总数  

                      如果不存在 
                        给 商品信息 添加 属性
                        buy属性 是否购买支付状态 默认值 true
                        num属性 购买数量 范围是 1 至 库存
                        将 商品数据 存储在 数组中 
                        以 json字符串形式 存储到 localStorage 的 cart 键名中

                  购物车不存在 购物车是空车 购物车中没有当期商品
                    都是新增商品

                  购物车中 有当期商品 累加 购买数量

            最后 跳转 购物车页面

    总结注意:
      标签不支持的事件 不能写事件委托语法形式
  */


</script>


</body>
</html>


<!--  





-->